<template>
  <div>
    <BasicModal v-bind="$attrs" @register="register" showFooter :title="getTitle" width="50%" @ok="closeModal">
      <!--    -->

      <div class="form">
        <Descriptions title="订单信息" bordered size="small">
          <DescriptionsItem label="订单编号">{{ formData.transactionNo }}</DescriptionsItem>
          <DescriptionsItem label="订单状态">{{ formData.orderStatusValue }}</DescriptionsItem>
          <DescriptionsItem label="付款时间">{{ formData.payTime }}</DescriptionsItem>
          <DescriptionsItem label="付款金额">{{ formData.totalPrice }}元
            <span v-if="formData.postagePrice">(包含邮费:{{ formData.postagePrice }}元)</span>
          </DescriptionsItem>
          <DescriptionsItem label="优惠券抵用" v-if="formData.totalCouponAmount">{{ formData.totalCouponAmount }}
          </DescriptionsItem>
          <DescriptionsItem label="下单人">{{ formData.userId }}</DescriptionsItem>
          <DescriptionsItem label="下单人留存手机">{{ formData.phone }}</DescriptionsItem>
          <DescriptionsItem label="用户备注">{{ formData.remarks }}</DescriptionsItem>

          <DescriptionsItem label="退款单号" v-if="formData.outRefundNo">{{ formData.outRefundNo }}</DescriptionsItem>
          <DescriptionsItem label="售后单号" v-if="formData.serviceSn">该用户存在售后行为，售后单号: {{ formData.serviceSn }}
          </DescriptionsItem>

          <DescriptionsItem label="订单关闭原因" v-if="formData.closeTypeName">{{ formData.closeTypeName }}:{{
            formData.closeReason }}
          </DescriptionsItem>


        </Descriptions>

        <Descriptions title="地址信息" bordered style="margin-top: 8px;" size="small">
          <DescriptionsItem label="收货人名称">{{ formData.receiver }}</DescriptionsItem>
          <DescriptionsItem label="收货人手机">{{ formData.cellPhone }}</DescriptionsItem>
          <DescriptionsItem label="省">{{ formData.provinceName }}</DescriptionsItem>
          <DescriptionsItem label="市">{{ formData.cityName }}</DescriptionsItem>
          <DescriptionsItem label="区/县">{{ formData.districtName }}</DescriptionsItem>
          <DescriptionsItem label="地址">{{ formData.address }}</DescriptionsItem>

        </Descriptions>

        <Descriptions title="运单信息" bordered style="margin-top: 8px;" size="small">
          <DescriptionsItem label="物流公司">{{ formData.dvyName }}</DescriptionsItem>
          <DescriptionsItem label="物流单号">{{ formData.waybillId }}</DescriptionsItem>
          <DescriptionsItem label="物流状态" v-if="formData.waybillInfoName" style="color: red;">{{ formData.waybillInfoName
            }}
          </DescriptionsItem>

        </Descriptions>
        <h3 style="margin-top: 8px;font-weight: bold;">物流信息信息</h3>

        <Table :columns="pathColumns" :data-source="path_action_list" size="small" :bordered="true" :pagination="false">
        </Table>

        <h3 style="margin-top: 8px;font-weight: bold;">商品信息</h3>

        <Table :columns="childColumns" :data-source="formData.items" size="small" :bordered="true" :pagination="false">

          <!--        <template #title>商品信息</template>-->
          <template #pic="{ record }">
            <Image :width="30" :height="30" :src="record.pic"></Image>
          </template>

        </Table>

      </div>

    </BasicModal>

  </div>
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { formatToDateTime } from '@/utils/dateUtil';
import { getOrderStatus, childColumns, pathColumns } from './role.data';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicTree, TreeItem } from '@/components/Tree';
import { getUserInfoByUserIdApi, queryFollowTraceApi } from '@/api/sys/sysOrder';
import {
  Table, Image,
  Descriptions, DescriptionsItem
} from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const formData = ref({})
const { createMessage } = useMessage();

function getCloseTypeName(e) {
  let value = "";
  switch (e.closeType) {
    case 1:
      value = "超时未支付";
      break;
    case 2:
      value = "已退款";
      break;
    case 3:
      value = "买家取消";
      break;

    default:
      break;
  }
  return value;
};

function getWaybillInfoName(e) {
  let value = "";
  switch (e.status) {
    case 0:
      value = "运单不存在或者未揽收";
      break;
    case 1:
      value = "已揽件";
      break;
    case 2:
      value = "运输中";
      break;
    case 3:
      value = "派件中";
      break;
    case 4:
      value = "已签收";
      break;
    case 5:
      value = "异常";
      break;
    case 6:
      value = "代签收";
      break;
  }
  return value;
};

const path_action_list = ref([]);
const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //打开弹层后的回调
  setModalProps({ confirmLoading: false });
  // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
  // if (unref(treeData).length === 0) {
  //   treeData.value = (await getMenuList()) as any as TreeItem[];
  // }

  formData.value = data.record;
  path_action_list.value = [];
  formData.value.orderStatusValue = getOrderStatus(data.record).text;
  if (formData.value.userId) {
    getUserInfoByUserIdApi({
      userId: formData.value.userId,
    }).then((res) => {
      //console.log(res)
      if (res.code == 200) {
        formData.value.phone = res.data.phone;
        formData.value.closeTypeName = getCloseTypeName(res.data);


      }
    });
  }

  let json = { orderId: formData.value.orderId };
  //查询运单状态
  queryFollowTraceApi(json).then(res => {
    if (res.code == 200) {
      formData.value.waybillInfoName = getWaybillInfoName(res.data);
      let arr = res.data?.path?.path_action;
      if (arr) {

        arr.forEach(element => {
          try {
            let action_time = parseInt(element.action_time + "000");
            let action_time_value = formatToDateTime(new Date(action_time));
            element.action_time_value = action_time_value;
          } catch (e) {
            console.log(e);

          }

        });
      }
      path_action_list.value = arr;
    }
  })

});

const getTitle = computed(() => "查看订单");

</script>
<style lang="less">
.form {
  padding: 20px;
  background: white;
}

.form-item {
  margin-bottom: 10px;
}
</style>
